<template>
	<div class="flex-end">
		<!--<div class="flex-start mr90 flex1">
			 <div class="f26 mr12">更多</div>
			<image src="@/static/mall/more.png" mode="widthFix" class="more-icon"></image> 
		</div>-->
		<div class="t-btn center ml20 f28" v-if="v.state==0" @click.stop="gocancel(v)">取消订单</div>
		<div class="t-btn f28 cfff exchange center" v-if="v.state==0" @click="show=true">立即兑换</div>
		<div class="t-btn center ml20 f28" v-if="v.state==3" @click.stop="applyRefund(v)">申请售后</div>
		<!-- <div class="t-btn center ml20 f28">催发货</div> -->
		<div class="t-btn center ml20 f28" @click="goDelete(v.orderNo)" v-if="v.state>=5">删除订单</div>
		<div class="t-btn center ml20 f28" v-if="v.state==3" @click="goList">再次兑换</div>
		<div class="t-btn center ml20 f28" @click.stop="openPage('/pages/dingDan/wuLiu?orderId='+v.orderNo)"
			v-if="v.state==2">
			查看物流</div>
		<div class="t-btn f28 cfff exchange center" v-if="v.state==2" @click="goShou(v.orderNo)">确认收货</div>
		<div class="t-btn center cfff exchange ml20 f28" @click.stop="openPage('/pages/dingDan/pingJia?orderId='+v.orderNo)"
			v-if="v.state==3">
			评价</div>
	</div>
	<!-- 验证码弹出层 -->
	<u-popup :safeAreaInsetBottom="false" :show="show" mode="bottom" bgColor="transparent">
		<div class="detail">
			<div class="flex-end" @click="show=false">
				<u-icon name="close-circle" color="#fff" size="28"></u-icon>
			</div>
			<div class="cfff fbold text4 tCenter mb40">确认支付</div>
			<div class="bfff box6 colum">
				<div class="mb50 w100">
					<div class="f32 fbold mb30">验证码</div>
					<div class="phone space-between">
						<input type="number" placeholder="请输入支付验证码" placeholder-style="color:#CFCFCF"
							v-model="phoneCode" />
						<div class="text1 f24 ctheme" @click="getPhoneVcode" v-if="time==60">获取验证码</div>
						<div class="text1 f24 ctheme" v-else>{{time}}</div>
					</div>
				</div>
				<div class="center cfff mt30 btn btn-orange1" @click="submit">确认支付</div>
			</div>
		</div>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				time: 60,
				account: '',
				phoneCode: '',
				userInfo: '',
				show: false,
				timeObj: {}
			}
		},
		props: {
			v: Object
		},
		methods: {
			goShou(orderNo) {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '确认收货吗？',
					success(r) {
						if (r.confirm) {
							that.$http(
								`/api/order/confirm?orderNo=${orderNo}&token=${uni.getStorageSync('uInfo').token}&phone=${uni.getStorageSync('uInfo').phone}`, {
									orderNo
								},
								true, 'POST').then(r => {
								that.sToast('收货成功')
								that.$emit('reset')
							})
						}
					}
				})
			},
			// 支付订单
			submit() {
				if (this.phoneCode == '') {
					uni.showToast({
						title: '请输入支付验证码',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '正在支付中',
					mask: true
				})
				let totalMount = this.v.totalAmount
				this.$http('/api/mall/order/payMoney', {
					orderNo: this.v.orderNo,
					phoneCode: this.phoneCode,
					totalMount
				}, true, 'POST').then((r) => {
					this.sToast('支付成功')
					this.$emit('reset')
				})
			},
			// 发送验证码
			getPhoneVcode() {
				// uni.showLoading({
				// 	title: '正在发送中'
				// })
				this.$http('/api/getPayPhoneVcode', {
					phone: this.userInfo.phone
				}).then(r => {
					this.setTime()
				})
			},
			setTime() {
				let that = this
				if (this.time == 0) {
					this.time = 60
					return
				}
				this.time--
				this.timeObj = setTimeout(() => {
					that.setTime()
				}, 1000)
			},
			// 再来一单跳转
			goList() {
				uni.switchTab({
					url: '../shopList/shopList'
				})
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/dingDan/shangChengXiangXi'
				})
			},
			applyRefund(v) {
				let that = this
				uni.showModal({
					title: '请输入退款原因',
					editable: true,
					placeholderText: '请输入',
					success: res => {
						console.log(res)
						if (res.confirm) {
							if (res.content == '') {
								uni.showToast({
									title: '请输入退款原因',
									icon: 'none'
								})
								return
							}
							that.$http('/api/mall/order/applyRefund', {
								phone: uni.getStorageSync('uInfo').phone,
								orderNo: v.orderNo,
								tkyy: res.content
							}, true, 'POST').then((r) => {
								uni.showToast({
									title: '退款成功！'
								})
								that.$emit('reset')
							})
						}

					}
				});
			},
			// 取消订单
			gocancel(v) {
				let that = this
				uni.showModal({
					title: '确认取消订单吗?',
					success: res => {
						if (res.confirm) {
							that.$http('/api/mall/order/cancel', {
								phone: uni.getStorageSync('uInfo').phone,
								orderNo: v.orderNo
							}, true, 'POST').then((r) => {
								uni.showToast({
									title: '订单已取消'
								})
								that.$emit('reset')
							})
						}
					}
				})
			},
			// 删除收货地址
			goDelete(orderNo) {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '确认删除吗？',
					success(r) {
						if (r.confirm) {
							that.$http('/api/mall/order/delete', {
									phone: uni.getStorageSync('uInfo').phone,
									orderNo
								},
								true, 'POST').then(r => {
								that.sToast('删除成功')
								that.$emit('reset')
							})
						}
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		width: 100%;
		background: linear-gradient(to right, #FF5858, #F957A4);
		padding: 25rpx 25rpx 0;
		border-radius: 25rpx 25rpx 0 0;

		.text4 {
			font-size: 46rpx;
			margin-top: -30rpx;
		}

		.box6 {
			width: 100%;
			padding: 70rpx;
			border-radius: 25rpx 25rpx 0 0;

			.huiyuan-icon {
				width: 298rpx;
				height: 298rpx;
				margin-bottom: 35rpx;
				border-radius: 15rpx;
			}

			.t-red {
				font-size: 52rpx;
			}

			textarea {
				width: 578rpx;
				height: 150rpx;
				background: #F4F4F4;
				margin-top: 50rpx;
				border-radius: 15rpx;
				padding: 25rpx;
				margin-bottom: 116rpx;
			}

			.btn-orange1 {
				background: linear-gradient(to right, #FF5623, #FF8900);
				height: 90rpx;
				width: 574rpx;
				border-radius: 45rpx;
			}

			.btn-white {
				background: #FFFFFF;
				border: 1px solid #858585;
			}
		}
	}

	.more-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.t-btn {
		width: 200rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid #333;
		margin-left: 15rpx;
	}

	.exchange {
		background: linear-gradient(90deg, rgba(255, 137, 1, 1) 0%, rgba(255, 83, 37, 1) 100%);
		border: none;
	}
</style>